import { Layout, Menu } from 'antd';

import { history } from 'umi';
import styles from './index.less';
import { useLocation } from 'umi';

import { manus } from '../../config/routes';

const { Header, Sider, Content } = Layout;

const BasicLayout = (props: any) => {
  const { pathname } = useLocation();

  return (
    <Layout className={styles.layout}>
      <Header className={styles.header} />

      <Layout className={styles.innerlayout}>
        <Sider width={225} className={styles.innerspder}>
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={[pathname]}
            items={manus.map((item) => ({
              key: item.path,
              // icon: React.createElement(icon),
              label: item.name,
            }))}
            onClick={(e) => history.push(e.key)}
          />
        </Sider>
        <Content className="site-layout-background" style={{ marginLeft: 225 }}>
          <div
            style={{
              padding: 24,
              background: '#fff',
              transition: 'color 0.3s',
            }}
          >
            {props.children}
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default BasicLayout;
